<script setup lang="ts">
function handleClickLeft() {
  uni.navigateBack()
}
</script>

<template>
  <view class="h-full flex flex-col overflow-hidden">
    <wd-navbar title="录入加料" left-text="返回" left-arrow @click-left="handleClickLeft" />
    <scroll-view
      scroll-y
      class="box-border flex-1 overflow-hidden p-[10px]"
      :show-scrollbar="false"
    >
      <wd-form>
        <custom-wd-input
          required
          focus-highlight
          custom-input-class="text-align-right"
          c-class=""
          label="餐盒名称"
          placeholder="请输入"
          placeholder-class="text-align-right"
        />
        <wd-cell title="图片" class="mt-3 rounded-lg" label="在手机点餐、平板点餐的点餐界面展示">
          <image-picker-normal class="inline-block" />
        </wd-cell>
        <wd-cell title="手机点餐端售卖" class="mt-3 rounded-lg" center>
          <wd-switch size="20px" />
        </wd-cell>
        <view class="mx-[10px] mt-6">
          <wd-text text="打印" bold size="16px" color="#333" />
        </view>
        <view class="mt-3 overflow-hidden rounded-lg">
          <wd-cell title="后厨打印" center label="如需打印后厨单，请选择对应的打印啥配置">
            <wd-switch size="20px" />
          </wd-cell>
          <custom-wd-input
            :rounded="false"
            c-class="rounded-none"
            custom-input-class="text-align-right"
            label="后厨打印档口"
            required
            placeholder="请选择打印机"
            placeholder-class="text-align-right"
          >
            <template #suffix>
              <wd-icon name="chevron-down" color="#909193" />
            </template>
          </custom-wd-input>
        </view>
        <view class="mx-[10px] mt-6 flex items-center justify-between">
          <wd-text text="关联菜品（3个）" bold size="16px" color="#333" />
          <view>
            <wd-button type="text">添加</wd-button>
          </view>
        </view>
        <wd-cell
          title="关联菜品"
          class="mt-2 rounded-lg"
          value="4个"
          is-link
          to="/pages/make/relatedDish"
        />
        <expand-bar expand-text="售卖、点餐端展示等更多设置" collapse-text="收起更多设置">
          <view class="mx-[10px] mt-6">
            <wd-text text="售卖" bold size="16px" color="#333" />
          </view>
          <wd-cell title="售卖状态" class="mt-3 rounded-lg" center>
            <wd-switch size="20px" />
          </wd-cell>
          <wd-cell title="收银端可临时改价" class="mt-3 rounded-lg" center>
            <wd-switch size="20px" />
          </wd-cell>
          <wd-cell title="收银端可手动打折" class="mt-3 rounded-lg" center>
            <wd-switch size="20px" />
          </wd-cell>
          <custom-wd-input
            custom-class="!pb-0"
            focus-highlight
            custom-input-class="text-align-right"
            c-class="mt-3"
            label="起售数量"
            placeholder="请输入"
            placeholder-class="text-align-right"
          >
            <template #desc>
              <wd-text text="如设置3，则需至少购买3份" color="#aaa" size="12px" />
            </template>
          </custom-wd-input>
          <custom-wd-input
            custom-class="!pb-0"
            focus-highlight
            custom-input-class="text-align-right"
            c-class="mt-3"
            label="增量售卖数"
            placeholder="请输入"
            placeholder-class="text-align-right"
          >
            <template #desc>
              <wd-text
                text="如设置3，可配合起始数使用，首次点“+”显示起售数量，再次点击增加增售卖数量"
                color="#aaa"
                size="12px"
              />
            </template>
          </custom-wd-input>
          <view class="mx-[10px] mt-6">
            <wd-text text="点餐端设置" bold size="16px" color="#333" />
          </view>
          <custom-wd-input
            custom-input-class="text-align-right"
            c-class="mt-3"
            label="菜品角标"
            placeholder="去设置"
            placeholder-class="text-align-right"
          >
            <template #suffix>
              <wd-icon name="chevron-down" color="#909193" />
            </template>
          </custom-wd-input>
          <wd-cell title="菜品描述" class="mt-3 rounded-lg" vertical>
            <wd-textarea
              :maxlength="50"
              show-word-limit
              auto-height
              no-border
              placeholder="展示在手机点餐菜品列表页"
            />
          </wd-cell>
          <wd-cell title="菜品详细描述" class="mt-3 rounded-lg" vertical>
            <wd-textarea
              :maxlength="200"
              show-word-limit
              auto-height
              no-border
              placeholder="展示在手机点餐菜品详情页"
            />
          </wd-cell>
          <view class="mx-[10px] mt-6 flex items-center justify-between">
            <wd-text text="收银端展示" bold size="16px" color="#333" />
            <wd-text text="查看收银端示例" size="12px" color="#FF3A3A" />
          </view>
          <custom-wd-input
            custom-input-class="text-align-right"
            c-class="mt-3"
            label="点餐标签"
            placeholder="去设置"
            placeholder-class="text-align-right"
          >
            <template #suffix>
              <wd-icon name="chevron-down" color="#909193" />
            </template>
          </custom-wd-input>
          <view class="mx-[10px] mt-6">
            <wd-text text="其他" bold size="16px" color="#333" />
          </view>
          <custom-wd-input
            custom-input-class="text-align-right"
            c-class="mt-3"
            label="数字速记码"
            placeholder="例如：001"
            placeholder-class="text-align-right"
          />
          <custom-wd-input
            custom-input-class="text-align-right"
            c-class="mt-3"
            label="拼音速记码"
            placeholder="例如：zZ"
            placeholder-class="text-align-right"
          />
          <custom-wd-input
            custom-input-class="text-align-right"
            c-class="mt-3"
            label="条形码"
            placeholder="请输入或扫码"
            placeholder-class="text-align-right"
          />

          <custom-wd-input
            custom-input-class="text-align-right"
            c-class="mt-3"
            label="桌台区域价格"
            placeholder="去设置"
            placeholder-class="text-align-right"
          >
            <template #suffix>
              <wd-icon name="chevron-right" color="#909193" />
            </template>
          </custom-wd-input>
          <wd-cell
            title="高级设置"
            class="mt-3 rounded-lg"
            label="出品部门、预估成本、保质期"
            center
          >
            <wd-text text="去设置" color="#bfbfbf">
              <template #suffix>
                <wd-icon name="chevron-right" color="#bfbfbf" size="16" />
              </template>
            </wd-text>
          </wd-cell>
        </expand-bar>
      </wd-form>
    </scroll-view>
    <view class="box-border h-[76px] flex items-center bg-white p-2">
      <wd-button
        class="flex-1 !border-1 !border-border !border-solid !text-primary"
        type="info"
        :round="false"
      >
        保存并继续添加
      </wd-button>
      <wd-button class="ml-2 flex-1" type="primary" :round="false">保存</wd-button>
    </view>
  </view>
</template>

<style scoped lang="scss"></style>
